<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>test</title>
    <script src="../js/html2canvas.min.js"></script>

    <!-- 将canvas图片保存成图片 -->
    <script src="../js/canvas2image.js"></script>
    <script src="../js/base64.js"></script>
    <style>
        #content{
            border-radius: 3px;
        }
        .myword{
            color: green;
            border: 1px solid gray;
            border-radius: 3px;
            text-align: center;
            margin-left: 26px;
            margin-top: 10px;
            float: left;
            padding: 5px;
        }
        .ah{
            display: block;
            text-align: center;
            color: #666;
        }
        #btnSave,#Download{
            margin: 10px 0 10px 26px;
        }
        .tx,.bt{
            border: 1px solid #999;
            width: 100px;
            height: 20px;
            margin-left: 26px;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        .bt{
            background-color: #333;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id=content style="width:150px;height:200px;border:1px gray solid">
        <span class="myword">Hello world</span>
        <br>
        <span class="ah"><h2>这里是文本</h2></span>
        <input type="text" class="tx">
        <br />
        <input type="button" class="bt" value="提交">
    </div>
    <button id="btnSave">转换成图片</button>
    <div id="images"></div>
    <button id="Download">Download</button>


  <!--取出对象中ID为某个值的某个数组-->
<!--<script type = "text/javascript" >
var data = [{
    id: "123",
    name: "名称1"
    },
    {
    id: "234",
    name: "名称2"
}];

function getById(id) {

    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
        return data[i];
        }
    }
    return null;
}

console.log(getById("123"));
console.log(getById("234"));
</script>-->
  <!--<script>
      function removeByValue(arr, val) {
          for(var i=0; i<arr.length; i++) {
              if(arr[i] == val) {
                  arr.splice(i, 1);
                  break;
              }
          }
      }
      var somearray = ["mon", "tue", "wed", "thur"];
      removeByValue(somearray, "tue");
      console.log(somearray);
  </script>-->
<!--<script src="../js/jquery-3.0.0.min.js"></script>-->
<!--<script src="../js/function.js"></script>-->
    <script>
        /*生成canvas图形*/

        // 获取按钮id
        var btnSave = document.getElementById("btnSave");
        // 获取内容id
        var content = document.getElementById("content");
        // 进行canvas生成
        btnSave.onclick = function(){
            html2canvas(content, {
                onrendered: function(canvas) {
                    //添加属性
                    canvas.setAttribute('id','thecanvas');
                    //读取属性值
                    // var value= canvas.getAttribute('id');
                    document.getElementById('images').appendChild(canvas);
                }
            });
        }
    </script>
    <script>
        /*
         * 说明
         * html2canvas，目前该插件还在开发中，暂不支持带有图片的div转换。图片会被忽略
         * 对一些的默认样式的支持可能不那么尽如人意，建议自己定义样式,
         * 不支持iframe
         * 不支持跨域图片
         * 不能在浏览器插件中使用
         * 部分浏览器上不支持SVG图片
         * 不支持Flash
         * 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试
         */
        var Download = document.getElementById("Download");
        Download.onclick = function(){
            var oCanvas = document.getElementById("thecanvas");

            /*自动保存为png*/
            // 获取图片资源
            var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
            saveFile(img_data1, 'abc');


            /*下面的为原生的保存，不带格式名*/
            // 这将会提示用户保存PNG图片
            // Canvas2Image.saveAsPNG(oCanvas);
        };
        // 保存文件函数
        var saveFile = function(data, filename){
            var save_link = document.createElement('a');
            save_link.href = data;
            save_link.download = filename;
            document.body.appendChild(save_link);
            //var event = document.createEvent('MouseEvents');
            //event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            //save_link.dispatchEvent(event);
            save_link.click();
            document.body.removeChild(save_link);
        };


        //工具方法
        //下载url所指向的文件
        /*function download(filename, url){

            var a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }*/


    </script>

</body>
</html>